<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close" :close-on-click-modal="false">
    <el-form ref="form" label-width="130px" :model="form" :rules="rules">
      <el-form-item label="费用号/项目名称" prop="costNumber">
        <el-select v-model="form.costNumber" placeholder="请选择" disabled>
          <el-option v-for="item in projectGroup" :key="item.id" :label="item.projectName" :value="item.costNumber"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单内容" prop="workContent">
        <el-input type="textarea" v-model="form.workContent" rows="4" disabled></el-input>
      </el-form-item>
      <el-form-item label="工单下单时间" prop="workOrderIssuanceTime">
        <el-date-picker
          v-model="form.workOrderIssuanceTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          disabled
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="执行人" prop="executUserId">
        <el-select v-model="form.executUserId" placeholder="请选择" disabled>
          <el-option v-for="item in userGroup" :key="item.id" :label="item.realname" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门" prop="departmentId">
        <el-select v-model="form.departmentId" placeholder="请选择" disabled>
          <el-option v-for="item in departmentGroup" :key="item.id" :label="item.departmentName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预计完成时间" prop="expectedCompletionTime">
        <el-date-picker v-model="form.expectedCompletionTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="版本号" prop="versionNumber">
        <el-input v-model.trim="form.versionNumber" />
      </el-form-item>
      <el-form-item label="是否签字" prop="isSign">
        <el-radio v-model="form.isSign" :label="1">是</el-radio>
        <el-radio v-model="form.isSign" :label="2">否</el-radio>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { updateWorkOrderNew, getUserList, getDepartmentList, getProjectGroup, getWorkOrderLevelList } from '@/api/wordOrder'

  export default {
    name: 'OrderNew',
    data() {
      return {
        projectGroup: [],
        userGroup: [],
        departmentGroup: [],
        workOrderLevelGroup: [],
        form: {
          id: '',
          costNumber: '',
          workContent: '',
          isCustomerDemand: 2,
          workOrderIssuanceTime: '',
          executUserId: '',
          departmentId: '',
          completionStatus: 1,
          completionTime: '',
          workLevelId: '',
          notClosingReason: '',
          expectedCompletionTime: '',
          versionNumber: '',
          isSign: '',
        },
        rules: {
          costNumber: [{ required: true, trigger: 'change', message: '请选择费用号/项目名称' }],
          workContent: [{ required: true, trigger: 'blur', message: '请输入工单内容' }],
          workOrderIssuanceTime: [{ required: true, trigger: 'change', message: '请选择工单下单时间' }],
          executUserId: [{ required: true, trigger: 'change', message: '请选选择执行人' }],
          completionStatus: [{ required: true, trigger: 'change', message: '请选择完成情况' }],
          completionTime: [{ required: true, trigger: 'change', message: '请选择完成时间' }],
          workLevelId: [{ required: true, trigger: 'change', message: '请选择工单等级' }],
          // notClosingReason: [{ required: true, trigger: 'blur', message: '请输入未关闭原因' }],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.fetchUserData()
        this.fetchProjectData()
        this.fetchWorkOrderLevelData()
        this.fetchDepartmentData()
      },
      async fetchUserData() {
        const { data } = await getUserList()
        this.userGroup = data
      },
      async fetchDepartmentData() {
        const { data } = await getDepartmentList()
        this.departmentGroup = data
      },
      async fetchProjectData() {
        const { data } = await getProjectGroup()
        this.projectGroup = data
      },
      async fetchWorkOrderLevelData() {
        const { data } = await getWorkOrderLevelList()
        this.workOrderLevelGroup = data
      },
      showEdit(row) {
        if (!row) {
          this.title = '新建客户新增需求工单'
        } else {
          this.title = '编辑客户新增需求工单'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
        this.$emit('fetchData')
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.id) {
              await updateWorkOrderNew(this.form)
            }
            this.$baseMessage('提交成功', 'success')
            this.$refs['form'].resetFields()
            this.dialogFormVisible = false
            this.$emit('fetchData')
            this.form = this.$options.data().form
          } else {
            return false
          }
        })
      },
    },
  }
</script>
